<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2021-07-10 14:33-16:11</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            padding: 10px;
        }

        .list {
            width: 800px;
            border: 1px solid #ccc;
            display: flex;
            padding: 5px 0;
            margin: 5px 0;
        }

        .list li {
            padding: 5px 10px;
            margin: 0 5px;
        }

        .list li:not(:first-child) {
            cursor: pointer;
        }

        .list li.active {
            background-color: orangered;
            color: white;
        }

        .show {
            border: 1px solid #ccc;
            width: 800px;
            padding: 10px;
            box-sizing: border-box;
        }

        .show .goods {
            display: flex;
            border-bottom: 1px solid #CCC;
        }

        .show .goods ul {
            margin-left: 20px;
        }

        .show .goods ul li {
            height: 50px;
            line-height: 50px;
        }

        .show .goods img {
            width: 200px;
        }
    </style>
</head>

<body>
    <ul class="city list">
        <li>城市:</li>
        <script id="city" type="text/html">
        {{each $data itme index}}
        {{if index===0}}
        <li class="active">{{itme.city}}</li>
        {{else}}
        <li>{{itme.city}}</li>
        {{/if}}
        {{/each}}
        </script>
    </ul>
    <ul class="type list">
        <li>类型:</li>
        <script id="type" type="text/html">
            {{each $data itme index}}
            {{if index===0}}
            <li class="active">{{itme.type}}</li>
            {{else}}
            <li>{{itme.type}}</li>
            {{/if}}
            {{/each}}
                   </script>
    </ul>
    <div class="show">
    </div>
    <script id="show" type="text/html">
        {{each $data itme index}}
        <div class="goods">
            <img src="{{itme.img}}">
            <ul>
                <li>{{itme.title}}</li>
                <li>{{itme.city}}</li>
                <li>{{itme.type}}</li>
                <li>{{itme.time}}</li>
            </ul>
        </div>
        {{/each}}
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./artTemplate.js"></script>
    <script>
        // $.get(`./city.json`, function (res) {
        //     res.forEach((c, index) => {
        //         let $li = $(`<li>`).text(c.city)
        //         if (index === 0) {
        //             $li.addClass(`active`)
        //         }
        //         $(`.city`).append($li)
        //     });
        // })
        // $.get(`./type.json`, function (res) {
        //     res.forEach((c, index) => {
        //         let $li = $(`<li>`).text(c.type)
        //         if (index === 0) {
        //             $li.addClass(`active`)
        //         }
        //         $(`.type`).append($li)
        //     });
        // })
        // $.get(`./show.json`,function(res){
        //     res.forEach((s, index) => {
        //         let $div=$(`<div class="goods"/>`)
        //         let $img=$(`<img/>`).attr("src",s.img)
        //         let $ul=$(`<ul/>`)
        //         let $li1=$(`<li/>`).text(s.title)
        //         let $li2=$(`<li/>`).text(s.city)
        //         let $li3=$(`<li/>`).text(s.type)
        //         let $li4=$(`<li/>`).text(s.time)
        //         $ul.append($li1)
        //         $ul.append($li2)
        //         $ul.append($li3)
        //         $ul.append($li4)
        //         $div.append($img)
        //         $div.append($ul)
        //         $(`.show`).append($div)
        //     })
        // })
        $.get(`./city.json`, function (res) {
            let html = template(`city`, res)
            $(`.city`).append(html)
        })
        $.get(`./type.json`, function (res) {
            let html = template(`type`, res)
            $(`.type`).append(html)
        })
        function show() {
            $(`.show`).empty()
            $.get(`./show.json`, function (res) {
                let city = $(`.city li.active`).text()
                if (city !== '全部' && city !== '') {
                    res = res.filter(r => r.city === city)
                }
                let type = $(`.type li.active`).text()
                if (type !== '全部' && type !== '') {
                    res = res.filter(r => r.type === type)
                }
                let html = template(`show`, res)
                $(`.show`).append(html)
            })
        }
        show()
        $(`.city`).on(`click`, `li:not(:first)`, function () {
            $(this).addClass(`active`).siblings(`.active`).removeClass(`active`)
            show()
        })
        $(`.type`).on(`click`, `li:not(:first)`, function () {
            $(this).addClass(`active`).siblings(`.active`).removeClass(`active`)
            show()
        })
    </script>
</body>

</html>